<template>
    <a-input-search
            v-model:value="course.courseNo"
            style="width: 250px;"
            placeholder="请输入课程号"
            enter-button
            @search="onSearch"
    />
  &nbsp;&nbsp;
    <a-input-search
            v-model:value="course.courseName"
            style="width: 250px;"
            placeholder="请输入课程名"
            enter-button
            @search="onSearch"
    />
  &nbsp;&nbsp;
    <a-input-search
            v-model:value="course.courseTime"
            style="width: 250px;"
            placeholder="请输入学时"
            enter-button
            @search="onSearch"
    />
    &nbsp;&nbsp;
    <a-input-search
            v-model:value="course.courseScore"
            style="width: 250px;"
            placeholder="请输入学分"
            enter-button
            @search="onSearch"
    />

      <a-button type="primary"  style="float: right" @click="addCourse">添加</a-button>
    <a-table :columns="columns" :data-source="courseDate" bordered>
        <template #bodyCell="{ column, text, record }">
            <template v-if="['name', 'age', 'address'].includes(column.dataIndex)">
                <div>
                    <a-input
                            v-if="editableData[record.key]"
                            v-model:value="editableData[record.key][column.dataIndex]"
                            style="margin: -5px 0"
                    />
                    <template v-else>
                        {{ text }}
                    </template>
                </div>
            </template>
            <template v-else-if="column.dataIndex === 'operation'">
                <div class="editable-row-operations">
          <span v-if="editableData[record.key]">
            <a-typography-link @click="save(record.key)">Save</a-typography-link>
            <a-popconfirm title="Sure to cancel?" @confirm="cancel(record.key)">
              <a>Cancel</a>
            </a-popconfirm>
          </span>
                    <span v-else>
            <a @click="edit(record.key)">Edit</a>
          </span>
                </div>
            </template>
        </template>
    </a-table>


      <div>

          <a-modal v-model:visible="visible" width="800px" title="修改学生信息" @ok="handleOk">
              <a-form
                  :model="formState"
                  v-bind="layout"
                  name="nest-messages"

                  @finish="handleOk"
              >
                  <a-form-item name="courseNo" label="课程号" >
                      <a-input v-model:value="formState.courseNo" />
                  </a-form-item>
                  <a-form-item name="courseName" label="课程名称" >
                      <a-input v-model:value="formState.courseName" />
                  </a-form-item>
                  <a-form-item name="courseTime" label="学时" >
                      <a-input v-model:value="formState.courseTime" />
                  </a-form-item>
                  <a-form-item name="courseScore" label="学分" >
                      <a-input v-model:value="formState.courseScore" />
                  </a-form-item>
              </a-form>
          </a-modal>
      </div>

</template>

<script setup lang="ts">

import {reactive, ref, UnwrapRef} from "vue";
import myAxios from "../../plugins/myAxios";
import {message} from "ant-design-vue";
import {cloneDeep} from "lodash-es";

const course = ref({
    courseNo:'',//课程号
    courseName:'',//课程名
    courseTime:'',//学时
    courseScore:'',//学分

})
const columns = [

    {
        title: '序号',
        dataIndex: 'id',
        width: '10%',
    },
    {
        title: '课程号',
        dataIndex: 'courseNo',
        width: '10%',
    },
    {
        title: '课程名',
        dataIndex: 'courseName',
        width: '10%',
    },
    {
        title: '学时',
        dataIndex: 'courseTime',
        width: '10%',
    },
    {
        title: '学分',
        dataIndex: 'courseScore',
        width: '10%',
    },
    {
        title: '创建时间',
        dataIndex: 'createTime',
        width: '10%',
    },
    {
        title: '更新时间',
        dataIndex: 'updateTime',
        width: '10%',
    }

];
interface DataItem {
    key: string;
    name: string;
    age: number;
    address: string;
}


const courseDate = ref()

const dataSource = ref(courseDate);
const editableData: UnwrapRef<Record<string, DataItem>> = reactive({});

const edit = (key: string) => {
    editableData[key] = cloneDeep(dataSource.value.filter(item => key === item.key)[0]);
};
const save = (key: string) => {
    Object.assign(dataSource.value.filter(item => key === item.key)[0], editableData[key]);
    delete editableData[key];
};
const cancel = (key: string) => {
    delete editableData[key];
};
const onSearch = async () =>{
    const res = await myAxios.post("/adminManageCourseInfos",{
        ...course.value
    })
    if (res.data){
        courseDate.value = res.data
    }else {
        message.error(res.message)
    }
}


const visible = ref(false)
const addCourse = async () => {
    visible.value = true
}
const handleOk = async () => {
    // console.log(formState.value)
    const res = await myAxios.post("/adminManageCourseInfos/add/course",{
        ...formState.value
    })
    if (res.data){
        message.success("添加成功")
        visible.value = false
    }else {
        message.error("添加失败")
    }
}
const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
};
interface DataItem {
    courseNo: string;
    courseName: string;
    courseTime: number;
    courseScore: number;
}
const formState = ref({
    courseNo: '',
    courseName: '',
    courseTime: '',
    courseScore: '',
})
</script>

<style scoped>

</style>